<template >
  <div class="login">
    <div class="content">
      <div class="bg">
      <img src="@/assets/image/login-bg.webp" alt="">
      <div class="welcome" ref="text" :style="`color:rgb(${rgba})`">
        <h3>欢迎使用</h3>
        <h3>北工商设备管理系统</h3>
      </div>
    </div>
    <div class="login-inp">
       <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="短信登录" name="phoneLogin">
            <el-input v-model="phone" placeholder="手机号" ></el-input>
            <div style="margin-top: 15px;">
              <el-input placeholder="请输入验证码" v-model="yzm"  class="input-with-select">
                <el-button slot="append" class="getYzm">获取验证码</el-button>
              </el-input>
            </div>
          </el-tab-pane>
          <el-tab-pane label="密码登录" name="passwordLogin">
            <el-input v-model="phone" placeholder="用户名"></el-input>
            <el-input v-model="password" type="password" placeholder="密码" class="password"></el-input>
          </el-tab-pane>
        </el-tabs>
        <el-button type="primary" class="toLogin" @click="toLogin">登录</el-button>
        <el-button :plain="true" class="message-tip" @click="open"></el-button>
    </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "LoginView",
     data() {
      return {
        activeName: 'phoneLogin',
        yzm: '654321',
        phone:'13800138002',
        password:'',
        rgba:'',
        types:'sms'
      };
    },
    methods: {
      handleClick(tab) {
        if(tab.index == '0') {
          this.types = 'sms'
          this.phone = '';
          this.yzm = ''
        }else {
          this.types = 'password'
          this.phone =''
          this.password = ''
        } 
      },
      random() {
        return Math.floor(Math.random() * 255 + 1);
      },
      rgb() {
        return this.random() + ',' + this.random() + ',' + this.random()
      },
      open() {
        this.$message({
          message: '登录成功',
          type: 'success'
        });
      },
      toLogin() {
        let data ;
        if(this.types == 'sms') {
          if(this.phone && this.yzm) {
            data = {
              type:"sms",
              phone: this.phone,
              code: this.yzm  
            }
          }else {
            alert('请输入手机号或验证码')
            return ;
          }
          
        }else {
          if(this.phone && this.password) {
                 data = {
                    type:"password",
                    username: this.phone,
                    password: this.password  
                  }
          }else {
            alert('请输入用户名或密码')
            return ;
          }
         
        }
        this.$axios({
          method:"post",
          url:'/login',
          data
        })
        .then(res => {
          if(res.data.code == 0) {
            this.open();
            localStorage.setItem('token', this.phone)
            this.$store.commit('changeUser', this.phone)
            this.$router.push({
              path: `/home`
            })
          }
        })
      },
      
    },
    mounted() {
      setInterval(() => {
        this.rgba = this.rgb()
      }, 300);

    }
  }
</script>

<style lang="less" scoped>
  .content {
      width: 900px;
      height: 350px;
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%, -50%);
  }
  .login {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/image/bg.png') no-repeat;
    background-size: cover;
    .bg {
      width: 600px;
      height: 100%;
      overflow: hidden;
      position: absolute;
      img {
        width: 100%;
        height: 100%;
      }
      .welcome {
        color:#fff;
        font-size: 28px;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 50px;
      }
    }
    .login-inp {
      width: 300px;
      height: 350px;
      box-sizing: border-box;
      padding: 40px;
      position: absolute;
      right: 0;
      top:0;
      background-color: #fff;
      .el-tabs__nav-wrap::after {
        display: none !important;
      }
      .el-tabs__nav-wrap::after {
        height: 0 !important;
        display: none !important;
      }
    }
    .password {
      margin-top: 15px;
    }
    .el-select .el-input {
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
  
    .toLogin {
      width: 100%;
      margin-top: 20px;
    }

    .getYzm {
      padding: 12px 10px;
    }
    @keyframes scale {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
    .message-tip {
      display: none;
    }
  }
</style>